<template>
    <n-card title="角色管理">
        <template #header-extra>
            <TableTool @add="onEdit" />
        </template>
        <Table ref="tableRef" :config="tableConfig" />
    </n-card>

    <ModalForm
        :items="formItems"
        v-model:show="formShow"
        v-model:value="formState"
        @submit="onSubmit"
        :loading="submiting"
    />
</template>

<script setup lang="ts">
import {
    authRoleAdd,
    authRoleDelete,
    authRoleList,
    authRoleUpdate
} from '@/apis/auth/role'
import { DeleteButton, EditButton } from '@/components/button'
import { FormItemsConfig, ModalForm } from '@/components/form'
import { Table, TableConfig, TableTool } from '@/components/table'
import useState from '@/hooks/useState'
import { IAuthRole, IAuthRoleEditParameter } from '@/types/auth/role'
import { NSpace, DataTableInst, useMessage } from 'naive-ui'
import { h, nextTick, ref } from 'vue'

const message = useMessage()

const tableRef = ref<DataTableInst>()
const tableConfig: TableConfig<IAuthRole> = {
    service: authRoleList,
    columns: [
        {
            title: 'ID',
            key: 'id'
        },
        {
            title: '名称',
            key: 'name'
        },
        {
            title: '排序',
            key: 'sort'
        },
        {
            title: '备注',
            key: 'remark'
        },
        {
            title: '操作',
            key: '_actions',
            width: 148,
            render(rowData) {
                return h(
                    NSpace,
                    {},
                    {
                        default: () => [
                            h(DeleteButton, {
                                service: () =>
                                    authRoleDelete({ id: rowData.id }),
                                onDone: () => tableRef.value?.run(),
                                buttonProps: {
                                    // @ts-ignore
                                    disabled: rowData._protect
                                }
                            }),
                            h(EditButton, {
                                onClick: () => onEdit(rowData)
                            })
                        ]
                    }
                )
            }
        }
    ]
}

/**
 * 编辑
 */
const formItems: FormItemsConfig<IAuthRoleEditParameter> = [
    {
        field: 'name',
        label: '名称',
        component: 'Input',
        props: {
            placeholder: '角色名称'
        },
        rule: { required: true, min: 2, max: 20 }
    },
    {
        field: 'sort',
        label: '排序',
        component: 'InputNumber',
        props: {
            min: 1,
            max: 9999,
            precision: 0
        },
        rule: { required: true }
    },
    {
        field: 'remark',
        label: '备注',
        component: 'Input',
        props: {
            type: 'textarea',
            placeholder: '记录点儿什么',
            autosize: true
        }
    }
]
const defaultState: IAuthRoleEditParameter = {
    name: '',
    remark: ''
}
const formState = ref<IAuthRoleEditParameter>({ ...defaultState })
const formShow = ref(false)
function onEdit(rowData?: IAuthRole) {
    formShow.value = true
    nextTick(() => {
        if (rowData) {
            formState.value = { ...rowData }
        } else {
            formState.value = { ...defaultState }
        }
    })
}

const { state: submiting, setState: setSubmiting } = useState()
function onSubmit() {
    setSubmiting(true)
    const API = formState.value.id ? authRoleUpdate : authRoleAdd
    API(formState.value)
        .then(() => {
            formShow.value = false
            tableRef.value?.run()
            message.success('操作成功')
        })
        .catch((e: Error) => {
            message.error(e.message)
        })
        .finally(() => setSubmiting(false))
}
</script>
